<template>
    <div>
        <el-container>
            <el-main>
                <el-row class="cost-space">
                    <el-row class="space-two">
                        <el-col :span="24">
                            <h3>物业标准</h3>
                        </el-col>
                    </el-row>
                    <el-col :span="13">
                        <el-row class="space-two">
                            <el-col :span="4" class="spanRight">
                                <span>普通住宅：</span>
                            </el-col>
                            <el-col :span="20">
                                <template>
                                    <el-input-number v-model="num1" controls-position="right" @change="handleChange"
                                        :min="2" :max="10"></el-input-number>
                                    <span>&nbsp;元/平方米</span>
                                </template>
                            </el-col>
                        </el-row>
                        <el-row class="space-two">
                            <el-col :span="4" class="spanRight">
                                <span>小高层：</span>
                            </el-col>
                            <el-col :span="20">
                                <template>
                                    <el-input-number v-model="num2" controls-position="right" @change="handleChange"
                                        :min="2" :max="15"></el-input-number>
                                    <span>&nbsp;元/平方米</span>
                                </template>
                            </el-col>
                        </el-row>
                    </el-col>
                    <el-col :span="11">
                        <el-row class="space-two">
                            <el-col :span="4" class="spanRight">
                                <span>写字楼：</span>
                            </el-col>
                            <el-col :span="20">
                                <template>
                                    <el-input-number v-model="num3" controls-position="right" @change="handleChange"
                                        :min="2" :max="20"></el-input-number>
                                    <span>&nbsp;元/平方米</span>
                                </template>
                            </el-col>
                        </el-row>
                        <el-row class="space-two">
                            <el-col :span="4" class="spanRight">
                                <span>商铺：</span>
                            </el-col>
                            <el-col :span="20">
                                <template>
                                    <el-input-number v-model="num4" controls-position="right" @change="handleChange"
                                        :min="5" :max="20"></el-input-number>
                                    <span>&nbsp;元/平方米</span>
                                </template>
                            </el-col>
                        </el-row>
                    </el-col>
                    <el-col :span="13">
                        <el-row class="space-two">
                            <el-col :span="4" class="spanRight">
                                <span>别墅：</span>
                            </el-col>
                            <el-col :span="20">
                                <template>
                                    <el-input-number v-model="num7" controls-position="right" @change="handleChange"
                                        :min="20" :max="80"></el-input-number>
                                    <span>&nbsp;元/平方米</span>
                                </template>
                            </el-col>
                        </el-row>

                    </el-col>
                </el-row>
                <el-row class="cost-space">
                    <el-col :span="13">
                        <el-row>
                            <el-row class="space-two">
                                <el-col :span="24">
                                    <h3>空调标准</h3>
                                </el-col>
                            </el-row>
                            <el-col :span="12">
                                <el-row class="space-two">
                                    <el-col :span="8" class="spanRight">
                                        <span>空调费：</span>
                                    </el-col>
                                    <el-col :span="16">
                                        <template>
                                            <el-input-number v-model="num5" controls-position="right"
                                                @change="handleChange" :min="3" :max="10"></el-input-number>
                                            <span>&nbsp;元/平方米</span>
                                        </template>
                                    </el-col>
                                </el-row>
                            </el-col>
                        </el-row>
                        <el-row class="cost-two">
                            <el-row class="space-two">
                                <el-col :span="24">
                                    <h3>垃圾费标准</h3>
                                </el-col>
                            </el-row>
                            <el-col :span="12">
                                <el-row class="space-two">
                                    <el-col :span="8" class="spanRight">
                                        <span>垃圾处理费：</span>
                                    </el-col>
                                    <el-col :span="16">
                                        <template>
                                            <el-input-number v-model="num6" controls-position="right"
                                                @change="handleChange" :min="0" :max="20"></el-input-number>
                                            <span>&nbsp;元/平方米</span>
                                        </template>
                                    </el-col>
                                </el-row>
                            </el-col>

                        </el-row>
                    </el-col>
                    <el-col :span="11">
                        <div id="c_main"></div>
                    </el-col>
                </el-row>
            </el-main>
        </el-container>
    </div>
</template>

<!-- <script src="echarts.js"></script> -->
<script>
    import * as echarts from 'echarts/core';
    import {
    TitleComponent,
    TooltipComponent,
    GridComponent,
    LegendComponent
    } from 'echarts/components';
    import { BarChart } from 'echarts/charts';
    import { CanvasRenderer } from 'echarts/renderers';

    // 注册必须的组件
    echarts.use([
        TitleComponent,
        TooltipComponent,
        GridComponent,
        LegendComponent,
        BarChart,
        CanvasRenderer
    ]);
    export default {
        data() {
            return {
                num1: 3,//普通住宅
                num2: 6,//小高层
                num3: 5,//写字楼
                num4: 10,//商铺
                num5: 5,//空调
                num6: 20,//垃圾
                num7: 50,//别墅
            };
        },
        methods: {
            handleChange(value) {
                console.log(value);
            }
        },
        mounted() {
            var main = echarts.init(document.querySelector('#c_main'));
            var option;
            option = {
                title: {
                    text: '费用标准'
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                legend: {},
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'value',
                    boundaryGap: [0, 0.01]
                },
                yAxis: {
                    type: 'category',
                    data: ['垃圾处理', '空调', '普通住宅', '小高层', '写字楼', '商铺','别墅']
                },
                series: [
                    {
                        name: 'money',
                        type: 'bar',
                        data: [20, 5, 3, 6, 5, 10,50]
                    },
                    // {
                    //     name: '2012',
                    //     type: 'bar',
                    //     data: [19325, 23438, 31000, 121594, 134141, 681807]
                    // }
                ]
            };
            main.setOption(option)
        }
    };
</script>

<style scoped lang="less">
    .spanRight {
        text-align: right;
        height: 40px;
        line-height: 40px;
    }

    .cost-space {
        padding: 20px;
    }

    .space-two {
        margin-bottom: 20px;
    }

    #c_main {
        width: 600px;
        height: 350px;
    }
    .cost-two{
        margin-top: 30px;
    }
</style>